<script >

import {  ChatLineRound, House, Memo, OfficeBuilding, ShoppingBag, ShoppingCart, User } from "@element-plus/icons-vue";



export default {
  name: "HomePage",
  components: {

    User,
    ChatLineRound,
    OfficeBuilding,
    Memo,
    ShoppingCart,
    House,
    ShoppingBag
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    },
  }
};

</script>


<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-col :span="24">
          <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
          >
            <img
                class="logo"
                src="@/static/img/logo.png"
            />
            <h3 class="mb-2">微风医药</h3>
            <el-menu-item index="1" @click="navigateTo('/HomePage/HomeView')">
              <template #title>
                <el-icon>
                  <House/>
                </el-icon>
                <span>主页</span>
              </template>
            </el-menu-item>

            <el-sub-menu index="2" >
              <template #title>
                <el-icon>
                  <ShoppingBag/>
                </el-icon>
                <span>商城</span>
              </template>
              <el-menu-item index="2-1" @click="navigateTo('/HomePage/shop')">按病买药</el-menu-item>
              <el-menu-item index="2-2" @click="navigateTo('/HomePage/SearchDrugs')">搜索药品</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <ShoppingCart/>
                </el-icon>
                <span>购物车</span>
              </template>
              <el-menu-item index="3-1"  @click="navigateTo('/HomePage/shopcar')">我的购物车</el-menu-item>
              <el-menu-item index="3-2"   @click="navigateTo('/HomePage/OrderPage')">我的订单</el-menu-item>
            </el-sub-menu>

            <!-- 科室查询菜单 -->
            <el-menu-item index="4" class="no-arrow" @click="navigateTo('/HomePage/department')">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>科室查询</span>
              </template>
            </el-menu-item>

            <el-menu-item index="5" @click="navigateTo('/HomePage/baike')">
              <template #title>
                <el-icon>
                  <Memo/>
                </el-icon>
                <span>健康百科</span>
              </template>
            </el-menu-item>

            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <OfficeBuilding/>
                </el-icon>
                <span>社区</span>
              </template>
              <el-menu-item index="6-1" @click="navigateTo('/HomePage/CommentView')">热门回复</el-menu-item>
              <el-menu-item index="6-2" @click="navigateTo('/HomePage/CommentByRelease')">最新发布</el-menu-item>
              <el-menu-item index="6-2" @click="navigateTo('/HomePage/CommentByReply')">最新回复</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="7" @click="navigateTo('/HomePage/AiServe')">
              <template #title>
                <el-icon>
                  <ChatLineRound/>
                </el-icon>
                <span>AI咨询</span>
              </template>
            </el-menu-item>

            <!-- 我的 -->
            <el-menu-item index="8"  @click="navigateTo('/HomePage/information')">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>我的</span>
              </template>
            </el-menu-item>
          </el-menu>



        </el-col>
      </el-aside>


      <el-container>
        <el-main class="el-main">
          <el-scrollbar>
            <router-view/>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>

  </div>


</template>

<style>


.logo {
  display: block;
  margin: 10px 50px; /* 调整图片的外边距 */
  width: 100px; /* 调整图片的宽度 */
  height: auto; /* 保持图片的宽高比 */

}

.el-main {

}


.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

h3 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  color: #4096ec;
}

.common-layout {
  position: relative;
  top: -60px; /* 向上移动20像素 */
}

</style>